<template>
	<pro-table ref="protable" rowKey="gradeId" :loadDataUrl="api.getList" :columns="columns" :isAdd="false"
		:isDelete="false" :isHideOrgName="false" :orgId="globalOrgId" :extendParam="{
			orgId: globalOrgId,
		}" @selectedRowChange="onSelectChange" @addRecord="addRecord" @importRecord="importDevice"
		@showDeleteConfirm="showDeleteConfirm" @handlerSearch="handlerSearch" @handlerReset="handlerReset">
		<span slot="operation" slot-scope="{ text, record }" class="operation">
			<a href="javascript:;" v-has="'sys:sysDevice:update'" title="编辑" class="edit" @click="editRecord(record)">编辑</a>
			<a href="javascript:;" v-has="'sys:sysDevice:delete'" title="删除" class="del"
				@click="showDeleteConfirm(1, record.gradeId, record.gradeName)">删除</a>
		</span>
		<span slot="createTime" slot-scope="{ text, record }">
			{{record.createTime ? record.createTime.slice(0, 10) : ''}}
		</span>
		<!-- 添加，编辑 -->
		<add-or-edit-device-modal :api="api" editKey="deviceId" modalTitle="设备" ref="addOrEditModal"
			@ok="handlerRefresh"></add-or-edit-device-modal>
	</pro-table>
</template>

<script>
	import {
		rowSelection,
		recordOperation
	} from '@/mixins';
	import {
		deviceManageapi
	} from '@/api/index.js';
	import {
		deviceCountTypeEnum
	} from '@/utils/enumeration.js';
	import {
		filterName
	} from '@/utils/base.js';
	import addOrEditDeviceModal from './module/addOrEditDeviceModal';
	const columns = [
		// {
		// 	title: '部门',
		// 	dataIndex: 'deptName',
		// 	key: 'deptName', // 列的关键字 如果有 dataIndex 则不需要key
		// 	ellipsis: true,
		// 	searchInfo: {
		// 		type: 'treeSelect',
		// 		value: 'deptId',
		// 		text: '部门',
		// 		defaultValue: undefined,
		// 		optionlist: [],
		// 		isLinkage: true, //是否联动筛选
		// 	},
		// },
		{
			title: '所属账户',
			dataIndex: 'userName',
			key: 'userName',
			searchInfo: {
				type: 'string',
				defaultValue: '',
				value: 'userName',
			},
		},
		{
			title: '产品类型',
			dataIndex: 'prodTypeName',
			key: 'prodTypeName',
			ellipsis: true,
		},
		{
			title: '产品名称',
			dataIndex: 'devType',
			key: 'devType',
			ellipsis: true,
		},
		{
			title: '设备名称',
			dataIndex: 'devName',
			key: 'devName',
			ellipsis: true,
		},
		{
			title: '设备ID',
			dataIndex: 'mac', // data数据源中对应的字段
			key: 'mac', // 列的关键字 如果有 dataIndex 则不需要key
			ellipsis: true,
		},
		// {
		// 	title: '绑定状态',
		// 	dataIndex: 'state',
		// 	key: 'state',
		// 	scopedSlots: {
		// 		customRender: 'state',
		// 	},
		// },
		{
			title: '激活时间',
			dataIndex: 'createTime',
			key: 'createTime',
			width: 180,
			scopedSlots: {
				customRender: 'createTime',
			},
			// customRender: function(t, r, index) {
			// 	// return r.createTime ? r.createTime.slice(0, 10) : '';
			// 	return '122'
			// },
		},

		// {
		// 	title: '操作',
		// 	key: 'operation',
		// 	scopedSlots: {
		// 		customRender: 'operation',
		// 	},
		// 	width: 160,
		// 	fixed: 'right',
		// },
	];
	export default {
		name: 'devicelist',
		mixins: [rowSelection, recordOperation],
		components: {
			addOrEditDeviceModal,
		},
		data() {
			return {
				columns: columns,
				filterName,
				api: deviceManageapi.deviceUrl,
				filter: {
					state: '',
				},
				countData: [{}],
				spinning: false,
			};
		},
		created() {
			this.columns = columns.filter((item) => {
				if (!(!this.isAdmin && item.key == 'deptName')) {
					return item;
				}
			});
			let newcolumns = [...this.columns];
			newcolumns = this.setColumnsSearchInfo(newcolumns, 'state', deviceCountTypeEnum, 'optionlist');
			newcolumns = this.setColumnsSearchInfo(newcolumns, 'state', undefined, 'defaultValue');
			this.columns = [...newcolumns];
			//this.getGradeyearList();
		},
		methods: {
			handlerSearch(obj) {
				let {
					activedDate,
					expiredTime,
					...otherParam
				} = obj;
				let param = {
					...otherParam,
				};
				if (activedDate && activedDate.length > 1) {
					this.filter.startActivedDate = activedDate[0] ? activedDate[0] : '';
					this.filter.endActivedDate = activedDate[1] ? activedDate[1] : '';
					param['startActivedDate'] = activedDate[0] ? activedDate[0] : '';
					param['endActivedDate'] = activedDate[1] ? activedDate[1] : '';
				}
				if (expiredTime && expiredTime.length > 1) {
					this.filter.startExpiredTime = expiredTime[0] ? expiredTime[0] : '';
					this.filter.endExpiredTime = expiredTime[1] ? expiredTime[1] : '';
					param['startExpiredTime'] = expiredTime[0] ? expiredTime[0] : '';
					param['endExpiredTime'] = expiredTime[1] ? expiredTime[1] : '';
				}
				this.$refs.protable.loadTable(param);
			},

			changeSelect(e, value, item) {
				this.$nextTick(() => {
					//如果需要联动筛选isLinkage，
					if (item && item.isLinkage) {
						//公用混合方法：获取筛选条件选中或输入的值
						this.getFilterDefaultValue();
					}
					if (value == 'orgId') {
						this.orgId = e;
					} else if (value == 'model') {
						console.log(e);
						if (e) {
							this.getDictItemKeyList([e], e);
							console.log(value);
						} else {
							let newcolumns = this.setColumnsSearchInfo(this.columns, 'model', e, 'defaultValue');
							newcolumns = this.setColumnsSearchInfo(newcolumns, 'version', [], 'optionlist');
							newcolumns = this.setColumnsSearchInfo(newcolumns, 'version', undefined, 'defaultValue');
							this.columns = [...newcolumns];
						}
					}
				});
			},
			/* 筛选条件重置, 将默认设置为undefined/[] */
			handlerReset(obj) {
				console.log('obj' + JSON.stringify(obj));
				let newcolumns = [...this.columns];
				for (var key in obj) {
					console.log(typeof obj[key]);
					if (['string', 'number'].includes(typeof obj[key])) {
						newcolumns = this.setColumnsSearchInfo(newcolumns, key, undefined, 'defaultValue');
					} else {
						if (Array.isArray(obj[key])) {
							newcolumns = this.setColumnsSearchInfo(newcolumns, key, [], 'defaultValue');
						}
					}
				}
				this.columns = [...newcolumns];
				this.orgId = '';
				this.$nextTick(() => {
					this.$refs.protable.loadTable({});
				});
			},
			//获取学年
			getGradeyearList() {
				this.$postAction(sysManageapi.gradeyearUrl.getList)
					.then((res) => {
						if (res && res.code == 1) {
							let list = res.data.map((item) => {
								let {
									gyId,
									gradeYear
								} = item;
								return {
									value: gyId,
									text: gradeYear,
								};
							});
							let newcolumns = this.setColumnsSearchInfo(
								this.columns,
								'gradeValue',
								undefined,
								'defaultValue'
							);

							newcolumns = this.setColumnsSearchInfo(newcolumns, 'gradeValue', list, 'optionlist');
							this.columns = [...newcolumns];
						}
					})
					.finally(() => {});
			},
			//刷新
			refreshCount() {},
			selectDevCountType() {},
			//续费
			rechange(record) {
				this.$refs.rechargeRecordModal.show(record);
			},
			importDevice() {
				this.$refs.importDeviceModal.show();
			},
			filterColorName(value, list) {
				if (value) {
					let index = list.findIndex((item) => item.value == value);
					if (index == -1) {
						return '';
					} else {
						return list.find((item) => item.value == value).color;
					}
				} else {
					return '';
				}
			},
		},
	};
</script>

<style scoped="scoped" lang="less">
	/deep/.deviceCount {
		position: relative;

		.devcount-item {
			padding: 10px 20px 0;
			text-align: center;
			//cursor: pointer;

			p {
				margin: 0;
			}

			.name {
				.ant-badge-status-text {}

				h2 {
					margin: 0;
				}
			}

			.num {
				font-size: 26px;
			}
		}

		.devcount-item.active {
			color: #108ee9;

			.name {
				.ant-badge-status-text {
					color: #108ee9;
				}
			}
		}

		.refresh {
			position: absolute;
			font-size: 24px;
			color: #000;
			top: 50%;
			right: 25px;
			transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			cursor: pointer;
		}
	}
</style>